﻿<div class="libelle_page">Statistiques</div>

<div ng-show="nbQcmDifferentsJoues > 0">
	<table id="statistiques">	
		<tr>
			<td>
				Nombre de QCM différents joués :
			</td>
			<td>
				{{nbQcmDifferentsJoues}}
			</td>
		</tr>
		<tr>
			<td>
				Nombre de QCM joués :
			</td>	
			<td>
				{{nbQcmJoues}}
			</td>
		</tr>		
	</table>	


	<div class="zone_graphique">	
		<div class="graphique graphique_bar">
			<div id="graphique_stats_par_date">
				<canvas id="stats_par_date"></canvas>
			</div>
			<div class="graphique_legende" id="stats_par_date_legend"></div>
			<br>							
			<button class="btn_afficher_details" ng-click="afficherDetails('graphique_stats_par_date')">Afficher les détails</button>
		</div>		
		<div class="details_graphique">
			 <div class="panel panel-default">
	            <div class="panel-heading">
	                <h3 class="panel-title">Détails du graphique</h3>
	            </div>
	            <div class="panel-body">
					Ce graphique montre l'évolution du nombre de QCM auxquels vous avez joué sur une année (Du {{premiereDate}} au {{derniereDate}})
				
					<br><br>
					<div class="titre_details_graphique">
						Nombre de QCM joués par année :
					</div>						
					<div ng-repeat="a in nbQcmParAnnees">
						En {{a.annee}} : {{a.nb_qcm}} QCM joué(s)
					</div>
					<br>							
					<button class="btn_afficher_graphique" ng-click="afficherGraphique('graphique_stats_par_date')">Afficher le graphique</button>
				</div>
			</div>  
		</div>		
		<div class="clear"></div>		
	</div>
	
	<div class="separteur_zone_graphique"></div>

	<div class="zone_graphique">			
		<div class="details_graphique">
			<div class="panel panel-default">
	            <div class="panel-heading">
	                <h3 class="panel-title">Détails du graphique</h3>
	            </div>
	            <div class="panel-body">
					Ce graphique indique le pourcentage de QCM, pour lesquels vous avez obtenu une note supérieure ou égale à la moyenne
					<br><br>
					<div class="titre_details_graphique">
						Nombre de QCM avec une note supérieure ou égale à la moyenne : {{cptAuDessusMoyenne}}
						<br><br>
						Nombre de QCM avec une note inférieure à la moyenne : {{cptEnDessousMoyenne}}
					</div>	
					<br>							
					<button class="btn_afficher_graphique" ng-click="afficherGraphique('graphique_stats_pourcentage_reussite_qcm')">Afficher le graphique</button>	
				</div>
			</div>  
		</div>
		<div class="separteur_details_graphique"></div>		
		<div class="graphique graphique_pie">
			<div id="graphique_stats_pourcentage_reussite_qcm">
				<canvas id="stats_pourcentage_reussite_qcm"></canvas>
			</div>
			<div class="graphique_legende" id="stats_pourcentage_reussite_qcm_legend"></div>
			<br>							
			<button class="btn_afficher_details" ng-click="afficherDetails('graphique_stats_pourcentage_reussite_qcm')">Afficher les détails</button>
		</div>	
		<div class="clear"></div>			
	</div>
	
	<div class="separteur_zone_graphique"></div>

	<div class="zone_graphique">		
		<div class="graphique graphique_pie">
			<div id="graphique_stats_pourcentage_reussite_reponse">
				<canvas id="stats_pourcentage_reussite_reponse"></canvas>
			</div>
			<div class="graphique_legende" id="stats_pourcentage_reussite_reponse_legend"></div>
			<br>							
			<button class="btn_afficher_details" ng-click="afficherDetails('graphique_stats_pourcentage_reussite_reponse')">Afficher les détails</button>
		</div>
		<div class="separteur_details_graphique"></div>
		<div class="details_graphique">
			<div class="panel panel-default">
	            <div class="panel-heading">
	                <h3 class="panel-title">Détails du graphique</h3>
	            </div>
	            <div class="panel-body">
					Ce graphique indique le pourcentage de questions, auxquelles vous avez bien répondu
					<br><br>	
					<div class="titre_details_graphique">
						Nombre de bonnes réponses : {{nbBonnesReponses}}
						<br><br>
						Nombre de mauvaises réponses : {{nbMauvaisesReponses}}
					</div>	
					<br>							
					<button class="btn_afficher_graphique" ng-click="afficherGraphique('graphique_stats_pourcentage_reussite_reponse')">Afficher le graphique</button>
				</div>
			</div>  
		</div>
		<div class="clear"></div>	
	</div>	

	<div class="libelle_page">Historique</div>
	<ul id="historique_qcm">
		<li ng-repeat="q in historiqueQcm" ng-click="afficherDetailsHistorique(q.id)">
			<table><tr><td>{{q.titre}}</td><td>Meilleur Note : {{q.meilleur_note}}</td><td><b class="caret"></b></td></tr></table>
			<div class="details_historique" id="details_historique_{{q.id}}">
				<table>
					<tr><td>Date</td><td>Note</td></tr>
					<tr ng-repeat="note in q.liste_notes">
						<td>{{note.date_format}}</td><td>{{note.note}}</td>
					</tr>
				</table>
			</div>
		</li>
	</ul>		
</div>

<div ng-show="nbQcmDifferentsJoues == 0">Aucun QCM joué !</div>


	
